<template>
	<view class="u-page">
		<view class="container">
		  <view class="littapp">
		    <view class="avatarUrl">
		    	<button type="balanced" open-type="chooseAvatar" @chooseavatar="onChooseavatar">
		    		<image :src="avatar" class="refreshIcon"></image>
		    	</button>
		    </view>
		    <view class="nickname">
		    	<text class="title">昵称：</text>
				<view class="weui-input">
					<input type="nickname" :value="nickname" placeholder="请输入昵称" @input="bindinput" @blur="bindblur"/>
				</view>
		    </view>
		  </view>
		  <view v-if="channel" class="auth-subtitle"><u-icon name="info-circle" :label="`【${channel}】请求获得您授权的公开信息（昵称、头像）`"></u-icon></view>
		  <view class="btnbox">
			  <u-button type="primary" customStyle="width:40%;" @click="login">授权绑定</u-button>
			  <u-button type="error" customStyle="width:40%;" @click="cancel">取消授权</u-button>
		  </view>
		</view>
	</view>
</template> 

<script>
	import {methods} from '@/utils/methods.js';
	export default {
		data() {
			return {
				avatar:'',
				nickname:'',
				type:'',
				qrcode_id:'',
				channel:''
			}
		},
		onLoad(e) {
			this.avatar='/static/header.png';
			this.qrcode_id=e.qrcode_id;
			this.$get('user/binduser',{qrcode_id:e.qrcode_id}).then(res=>{
				this.avatar=res.avatar;
				this.nickname=res.nickname;
				this.channel=res.channel;
			});
		},
		methods:{
			...methods,
			onChooseavatar:function(e) {
			   this.$uploadFile(e.detail.avatarUrl,res=>{
				   this.avatar=res.fullurl;
			   });
			},
			bindblur(e) {
				this.nickname = e.detail.value; 
			},
			bindinput(e){
				this.nickname = e.detail.value;
			},
			login:function(){
				if(this.avatar=='/static/header.png'){
					this.$msg('请先上传头像！');
					return;
				}
				if(this.nickname.trim()==''){
					this.$msg('请先输入昵称！');
					return;
				}
				wx.login({
				    success:res=>{
						// 发送用户信息
						this.$post('user/wxlogin', {
							code: res.code,
							avatar:this.avatar,
							nickname:this.nickname,
							qrcode_id:this.qrcode_id
						},true).then(res => {
							uni.setStorageSync('userinfo', res.userinfo);																
							uni.setStorageSync('token', res.token);
							let redict_url=uni.getStorageSync('redict_url');
							if(redict_url){
								uni.setStorageSync('redict_url','');
								uni.reLaunch({
									url:redict_url
								});
							}else{
								this.$reLaunch('index/index');
							}
						});
					}
				});
			},
			cancel:function(){
				this.$reLaunch('index/index');
			}
		}
	}
</script>

<style lang="scss">
.u-page {
  background: #fff;
  font-size: 32rpx;
}

.container {
  padding: 0 60rpx;
}
.littapp{
	margin-bottom: 52rpx;
}
.avatarUrl {
	padding: 80rpx 0 40rpx;
	background: #fff;
	width: 230rpx;
	margin: 0 auto;
	button {
		background: #fff;
		height: auto;
		width: auto;
		padding: 30rpx;
		margin: 0;
		display: flex;
		justify-content: center;
		align-items: center;
		.refreshIcon {
			width: 160rpx;
			height: 160rpx;
			border-radius: 50%;
		}
		.jt{
			width: 14rpx;
			height: 28rpx;
		}
	}
}
.nickname,.mobile{
	background: #fff;
	padding-top: 20rpx;
	padding-bottom: 30rpx;
	display: flex;
	align-items: center;
	justify-content: flex-start;
	.title{
		width: 30%;
		text-align: right;
	}
	.weui-input{
		width: 70%;
		padding-bottom: 10rpx;
		color: #888;
		padding-left: 20rpx;
		border-bottom: 1px solid #ddd;
		button{			
			color: #888;
			background-color:#fff;
			display: inline;
			margin:0;
			border: none;
			line-height: 16px;
			padding:0!important;
			font-size: 16px;
		}
		button:after{
			border: none;
		}
	}
}

.auth-subtitle {
  color: #888;
  width: 88%;
  margin: 40rpx auto;
}

.login-btn {
  border: none;
  height: 88rpx;
  line-height: 60rpx;
  background: #4095d6;
  color: #fff;
  font-size: 11pt;
  border-radius: 999rpx;
}

.login-btn::after {
  display: none;
}

.login-btn.button-hover {
  box-shadow: inset 0 5rpx 30rpx rgba(0, 0, 0, 0.15);
}
.btnbox{
  display: flex;
  justify-content: space-around;
  margin:0 auto;
  width: 80%;
  margin-top: 100rpx;
}

</style>